<template>
  <div class="content" id="content">
    <ul ref="listUser" @touchmove="bMove=true">
      <li class="item" v-for="(item, index) in userData">
        <p :data-index="index">{{item.letter}}</p>
        <ul>
          <li  v-for="bankName in item.data">{{bankName}}</li>
        </ul>
      </li>
    </ul>
    <div class="list_index" id="listIndex" ref="listIndex">
      <ul id="list_index">
        <li @touchstart="setScroll(item)" :class="redColorIndex === index ?'redColor':''"
          @touchend="showBigLetter(item)" :data-index="index"
          v-for="(item,index) in userIndex">{{item }}</li>
      </ul>
    </div>
    <div class="showLetter" id="showLetter" v-if="showLetter">
        <div class="letter">{{letter}}</div>
    </div>
  </div>
</template>

<script>
import { isChinese, isChar } from '@/untils/index'
export default {
  data () {
    return {
      bMove: false,
      letter: '',
      showLetter: false,
      defalutLetter: 'B',
      redColorIndex: 0,
      userData: [
        {
          'letter': 'B',
          'data': ['包商银行', '包商银行', '包商银行', '包商银行']
        },
        {
          'letter': 'C',
          'data': ['草商银行', '草商银行', '草商银行', '草商银行']
        },
        {
          'letter': 'D',
          'data': ['到商银行', '到商银行', '到商银行', '到商银行']
        },
        {
          'letter': 'E',
          'data': ['二商银行', '二商银行', '二商银行']
        },
        {
          'letter': 'F',
          'data': ['父商银行', '父商银行', '父商银行', '父商银行']
        },
        {
          'letter': 'G',
          'data': ['古商银行', '古商银行', '古商银行', '古商银行']
        },
        {
          'letter': 'H',
          'data': ['古商银行', '古商银行', '古商银行', '古商银行']
        },
        {
          'letter': 'I',
          'data': ['古商银行', '古商银行', '古商银行', '古商银行']
        }
      ],
      brandlist: [
        { name: '上工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '啊工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '吧工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '传工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '过工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '票工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '潘工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '拍工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '瑞工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '弱工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '加工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '里工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '玩工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '去工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '钱工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '哦工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '点工', img: 'image/20180223/20180223110830506714.jpg' },
        { name: '嘛工', img: 'image/20180223/20180223110830506714.jpg' }
      ]
    }
  },
  computed: {
    userIndex () {
      return this.filterIndex(this.userData)
    }
  },
  methods: {
    pySort (arr, empty) {
      // var $this = this
      if (!String.prototype.localeCompare) return null
      var letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('')
      var zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')
      var arrList = []
      for (var m = 0; m < arr.length; m++) {
        arrList.push(arr[m].name)
      }
      var result = []
      var curr
      for (var i = 0; i < letters.length; i++) {
        // debugger
        curr = { letter: letters[i], data: [] }
        if (i !== 26) {
          for (var j = 0; j < arrList.length; j++) {
            var initial = arrList[j].charAt(0) // 截取第一个字符
            if (zh[i] !== '*' && isChinese(initial)) { // 判断是否是无汉字,是否是中文
              if (initial.localeCompare(zh[i]) >= 0 && (!zh[i + 1] || initial.localeCompare(zh[ i + 1 ]) < 0)) { // 判断中文字符在哪一个类别
                curr.data.push(arrList[j])
              }
            } else if (arrList[j].charAt(0) === letters[i] || arrList[j].charAt(0) === letters[i].toLowerCase()) { // 首字符是英文的
              curr.data.push(arrList[j])
            }
          }
        } else {
          for (var k = 0; k < arrList.length; k++) {
            var ini = arrList[k].charAt(0)          // 截取第一个字符
            if (isChar(ini) && isChinese(ini)) {
              curr.data.push(arrList[k])
            }
          }
        }
        if (empty || curr.data.length) {
          result.push(curr)
          // curr.data.sort(function(a,b){
          //    return b.localeCompare(a);       //排序,英文排序,汉字排在英文后面
          // });
        }
      }
      return result
    },
    // isChinese (temp) {
    //   var re = /[^\u4E00-\u9FA5]/
    //   if (re.test(temp)) { return false }
    //   return true
    // },
    // isChar (char) {
    //   var reg = /[A-Za-z]/
    //   if (!reg.test(char)) { return false }
    //   return true
    // },
    // -------------------------------------
    filterIndex (data) {
      var resultIndex = []
      for (var i = 0; i < data.length; i++) {
        if (data[i].letter) {
          resultIndex.push(data[i].letter)
        }
      }
      return resultIndex
    },
    setLisIndexPos () {
      console.log(this.$refs.listIndex)
      const iH = this.$refs.listIndex.offsetHeight

      document.getElementById('listIndex').style.marginTop = -iH / 2 + 'px'
    },
    setScroll (letter) {
      // debugger
      var el = document.documentElement ? document.documentElement : document.body
      var aP = document.getElementsByTagName('p')
      var aLi = document.getElementById('list_index').getElementsByTagName('li')
      for (var i = 0; i < aP.length; i++) {
        if (aP[i].innerText.toLocaleString() === letter.toLocaleString()) {
          el.scrollTop = aP[i].offsetTop
          for (var j = 0; j < aLi.length; j++) {
            if (aLi[j].getAttribute('data-index') - 0 === i) {
              console.log(aLi[j].getAttribute('data-index'))
              this.redColorIndex = i
            }
          }
        }
      }
    },
    showBigLetter (letter) {
      var that = this
      that.showLetter = true
      if (that.showLetter) {
        that.letter = letter
        setTimeout(() => {
          that.showLetter = false
        }, 1000)
      }
    },
    // 监听滚动时，设置字母的样式
    handleScroll () {
      var that = this
      var aP = document.getElementsByTagName('p')
      var scroll = document.body.scrollTop || document.documentElement.scrollTop
      for (var i = 1; i < aP.length; i++) {
        if (aP[i].offsetTop < scroll) {
          this.redColorIndex = i  // 设置当前字母的样式
          if (aP[i + 1].offsetTop - scroll < 0) {
            that.showBigLetter(aP[i + 1].innerHTML)
          }
        }
      }
    }
  },
  mounted () {
    this.userData = this.pySort(this.brandlist)
    this.setLisIndexPos();
    (function (doc, win) {
      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
  *{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.headerBox{
			position: fixed;
			overflow: hidden;
			width: 100%;
			z-index: 999;
			margin-bottom: 40px;
		}
		.header{
			height: 40px;
			line-height: 40px;
			background: #ccc;
			color: white;
			text-align: center;
			border: 1px solid #ddd;
			padding-left: 15px;
			padding-right: 15px;
		}
		.header button:nth-of-type(1){
			float: left;
		}
		.header button:nth-of-type(2){
			float: right;
		}
		.header button{
			height: 40px;
			padding: 0px 5px;
		}
		.header button:last-child{
			float: right;
		}
		.content{
			position: relative;
		}

		.item p{
			background: #ccc;
			color: white;
			padding-left: 20px;
			line-height: 30px;
			font-size: 0.9rem;
		}
		.item ul li{
			border-bottom: 1px solid #ddd;
			line-height: 30px;
			padding: 3px 0px 3px 30px;
			font-size: 0.7rem;

		}

		.list_index{
			position: fixed;
			right: 15px;
			top: 50%;
			text-align: center;
			z-index: 999;
		}

		.list_index ul li{
			line-height: 20px;
			cursor: pointer;
			font-size: 0.625rem;
		}
		.redColor{
			color: red;
		}
		#alert{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			position: fixed;
			left: 0px;
			top: 0px;
			z-index: 99999;
			display: flex;
		}
		#alert .alert_content{
			width: 70%;
			height: 140px;
			background: white;
			border-radius: 5px;
			margin: auto;
			position: relative;
		}
		#alert .alert_title{
			padding: 8px;
			border-bottom: 1px solid #ddd;
		}
		#alert .alert_tel{
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		#alert .alert_btn{
			position: absolute;
			right: 0px;
			bottom: 5px;
		}
		#alert .alert_btn button{padding: 8px 12px;margin-right: 10px;border-width: 0px;border-radius:5px ;}
		button:active,button:focus{outline:none;}
		#alert .alert_btn button:first-child{background-color: #00a5e0;color: white;}


		.showLetter{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			left: 0px;
			top: 0px;
			z-index: 99;
		}
		.showLetter .letter{
			width: 1.8rem;
			height: 1.8rem;
			text-align: center;
			line-height: 1.8rem;
			background-color: #A0A0A0;
			color: white;
			border-radius: 50%;
			font-size: 0.8rem;
		}

</style>
